Material swatch

Sometimes you may want to show your materials separately from the rest of the model.

Result

Live Editor

function Component() {
  const viewer = useRef(null);
  useLayoutEffect(() => {
    if (viewer.current) {
      viewer.current.features = {
        UPHOLSTERY: "CORD_EMERALD", // or "SMART_LEATHER_SADDLE", "SOFT_WOOL_OATMEAL"
        LEGS: "TAPERED_METAL_LEG_BRASS", // or "TAPERED_METAL_LEG_BLACK"
      };
    }
  }, [viewer]);

  return (
    <cylindo-viewer ref={viewer} customer-id="5098" code="SECTIONAL PDP">
      <cylindo-swatch
        feature-code="UPHOLSTERY"
        zoomable
        display-mode="fit-inside-viewer"
        thumbnail-crop="0.1,0.1, 0.2, 0.2"
      />
      <cylindo-swatch feature-code="LEGS" />
      <cylindo-swatch feature-code="LEGS" thumbnail-crop="0, 0, 1" />
      <cylindo-thumbnail-bar></cylindo-thumbnail-bar>
    </cylindo-viewer>
  );
}

Props

Name	Type	Default	Description
`alt`	`string`	`""`	Alternative text for the material item. This is used by screen readers.
`customer-id`	`string`	`null`	The customer ID of the material to show. It falls back to the customer ID from the `<cylindo-viewer>`.
`display-mode`	`string`	`"cover-viewer"`	Determines how the material image fits within the viewer's content area.
`feature-code`	`string`	`null`	The feature code of the material to show.
`thumbnail-crop`	`string`	`"0.03125, 0.03125, 0.0625"`	The crop applied to the swatch thumbnail.
`zoomable`	`boolean`	`false`	Enables the zoom feature.

Props​

Props